---
const { item } = Astro.props;

const path = `/images/${item.localImagesPath}/0.jpg`

---

<div class="mt-8">
	<a href={`/images/${item.localImagesPath}`}>
		<img
			src={path}
			alt={`${item.content} Poster`}
			class="thumbnail hover:opacity-75 transition ease-in-out duration-150"
			id={`image-poster-${item.localImagesPath}`}
			transition:name={`poster-${item.localImagesPath}-0`}
		/>
	</a>
	<div class="mt-2">
		<a href={`/images/${item.localImagesPath}`} class="text-lg mt-2 hover:text-gray-300" transition:name={`${item.localImagesPath}-title`}>{item.content}</a>
		<div class="flex items-center text-gray-400 text-sm mt-1">
			<span class="ml-1">《{item.origin}》</span>
			<span class="mx-2">|</span>
			<span>{item.author}</span>
		</div>
		<div class="text-gray-400 text-sm">{item.date}</div>
	</div>
</div>
